import React, { useState, useEffect } from 'react'
import '../styles/Login.less'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { ArrowLeft, } from '@nutui/icons-react'
import { Form, Input } from 'antd-mobile'
import { Button } from '@nutui/nutui-react'
import { Toast } from 'react-vant'
import '../styles/demo2.less'
export default function Zhuce() {
    let navigate = useNavigate()
    let [phone, setphone] = useState('')
    let [username, setusername] = useState('')
    let [password, setpassword] = useState('')
    let [password1, setpassword1] = useState('')
    let [yan, setyan] = useState('')
    //获取验证码倒计时
    let [tim, settim] = useState('获取验证码')
    let dao = () => {
        let tims = 60
        let time = setInterval(() => {
            settim(`${tims}s`)
            tims--
            if (tims < 0) {
                clearInterval(time)
                settim('获取验证码')
            }
        }, 1000)
    }

    //阿里云接口
    const [pass, setPass] = useState('');
    let jie = () => {
        axios.get(`http://127.0.0.1:3000/jxy/verifyCode/?tel=${phone}`)
            .then((response) => {
                let a = response.data;
                setPass(a);
                console.log(a);
            })
            .catch((error) => {
                console.error(error);
                Toast({
                    message: '手机号获取验证码失败，请稍后再试，格式错误',
                    position: 'bottom',
                })
            });
    }

    //正则表达式验证手机号
    let zheng = /^1[3456789]\d{9}$/
    let yan1 = () => {
        if (zheng.test(phone)) {
            jie()
            dao()
        } else {
            alert('请输入正确的手机号')
        }
    }
    //注册
    let zhucs = async() => {
        if (username != '') {
            if (zheng.test(phone)) {
                if (password != '') {
                    if(password==password1){
                        if(yan==pass&&yan!=''){
                            let obj={
                                phone,
                                password,
                                username
                            }
                            let data=await axios.post(`http://127.0.0.1:3000/jxy/zhuc`,obj)
                            if(data.data.code==200){
                                Toast({
                                    message: `注册成功`,
                                    position: 'bottom',
                                })
                                setTimeout(() => {
                                    navigate('/login')
                                }, 500);
                            }else{
                                Toast({
                                    message: `${data.data.msg}`,
                                    position: 'bottom',
                                })
                            }
                        }else{
                            Toast({
                                message: '验证码不正确',
                                position: 'bottom',
                            })
                        }
                    }else{
                        Toast({
                            message: '请确认密码',
                            position: 'bottom',
                        })
                    }
                } else {
                    Toast({
                        message: '请输密码',
                        position: 'bottom',
                    })
                }
            } else {
                Toast({
                    message: '请输正确的手机号',
                    position: 'bottom',
                })
            }
        } else {
            Toast({
                message: '请输入姓名',
                position: 'bottom',
            })
        }
    }

    return (
        <div className='jxy_zhuc'>
            <div className="jxy_zhuc_top">
                <span onClick={() => { navigate('/login') }}><ArrowLeft /></span>
                <span className='jxy_zhuc_text'>注册</span>
                <span>
                </span>
            </div>
            <div className="jxy_zhuc_com">
                <Form layout='horizontal' mode='card'>
                    <Form.Item label='姓名'>
                        <Input placeholder='请输入姓名' value={username} onChange={(e) => { setusername(e) }} />
                    </Form.Item>
                    <Form.Item label='手机号'>
                        <Input placeholder='请输入手机号' value={phone} onChange={(e) => { setphone(e) }} />
                    </Form.Item>
                    <Form.Item label='密码'>
                        <Input placeholder='请输入密码' value={password} onChange={(e) => { setpassword(e) }} />
                    </Form.Item>
                    <Form.Item label='确认密码'>
                        <Input placeholder='请输入密码' value={password1} onChange={(e) => { setpassword1(e) }} />
                    </Form.Item>
                    <Form.Item label='短信验证码' extra={<a onClick={yan1}>{tim}</a>}>
                        <Input placeholder='请输入验证码' value={yan} onChange={(e) => { setyan(e) }} />
                    </Form.Item>
                    <Button block type="primary" color='blue' onClick={zhucs}>
                        注册
                    </Button>
                </Form>
            </div>
        </div>
    )
}
